<template>
  <div class="cluster recovery">
    <a-card style="width: 100%">
      <p slot="title" class="cardTitles">
        <span>考试详情</span>
        <a-button type="primary" @click="back">返回</a-button>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-row>
            <a-col :span="4">
              <a-form-item label="职工姓名">
                <a-input v-model="name" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="3">
              <a-form-item label="工号">
                <a-input v-model="workerID" type="text" style="width: 80px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="站段">
                <a-select
                  v-model="section"
                  style="width: 120px"
                  @change="handleSectionChange"
                  :disabled="loginUserAuth === 3"
                >
                  <a-select-option
                    v-for="section in sectionData"
                    :key="section"
                  >
                    {{ section }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="车间/科室">
                <a-select
                  v-model="shop"
                  style="width: 150px"
                  @change="handleShopChange"
                  :disabled="loginUserAuth === 3"
                >
                  <a-select-option v-for="shop in shopData" :key="shop">
                    {{ shop }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="班组名称">
                <a-select v-model="group" style="width: 100px">
                  <a-select-option v-for="group in groupData" :key="group">
                    {{ group }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item>
                <a-button type="primary" @click="search">搜索</a-button>
              </a-form-item>
              <a-form-item>
                <a-button @click="reset">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin-top: 20px" class="table-content">
        <a-table
          bordered
          :columns="columns"
          :data-source="list"
          rowKey="id"
          :loading="loading"
          :pagination="pagination"
          @change="employeeChangePage"
        >
          <template slot-scope="text, record" slot="action">
            <!-- <a class="tools" @click="print(record)">打印</a> -->
            <a class="tools" @click="result(record)">考试结果</a>
          </template>
          <template slot-scope="text, record" slot="pass">
            <p v-if="record.pass === true" style="color: rgb(0, 255, 0)">
              通过
            </p>
            <p v-else style="color: rgb(255, 0, 0)">未通过</p>
          </template>
          <template slot-scope="text, record" slot="overDue">
            <p v-if="record.overDue === false" style="color: rgb(0, 255, 0)">
              否
            </p>
            <p v-else style="color: rgb(255, 0, 0)">是</p>
          </template>
        </a-table>
      </div>
    </a-card>
    <!-- 打印内容 -->
    <div id="print-content" ref="pdfDom" style="padding: 0 30px; display: none">
      <div class="result-item" style="page-break-after: always">
        <a-descriptions bordered :column="3" title="成绩单">
          <a-descriptions-item label="考试名称" :span="3">
            测试考试
          </a-descriptions-item>
          <a-descriptions-item label="姓名:"> 张三 </a-descriptions-item>
          <a-descriptions-item label="性别:"> 男 </a-descriptions-item>
          <a-descriptions-item label="工号:"> 12345 </a-descriptions-item>
          <a-descriptions-item label="站段:"> 天津 </a-descriptions-item>
          <a-descriptions-item label="车间/科室:"> 保卫科 </a-descriptions-item>
          <a-descriptions-item label="小组:"> 后勤组 </a-descriptions-item>
          <a-descriptions-item label="考试分数:" :span="3">
            85
          </a-descriptions-item>
          <a-descriptions-item label="考试时间:">
            20200801
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="result-item" style="page-break-after: always">
        <a-descriptions bordered :column="3" title="成绩单">
          <a-descriptions-item label="考试名称" :span="3">
            测试考试
          </a-descriptions-item>
          <a-descriptions-item label="姓名:"> 张三 </a-descriptions-item>
          <a-descriptions-item label="性别:"> 男 </a-descriptions-item>
          <a-descriptions-item label="工号:"> 12345 </a-descriptions-item>
          <a-descriptions-item label="站段:"> 天津 </a-descriptions-item>
          <a-descriptions-item label="车间/科室:"> 保卫科 </a-descriptions-item>
          <a-descriptions-item label="小组:"> 后勤组 </a-descriptions-item>
          <a-descriptions-item label="考试分数:" :span="3">
            85
          </a-descriptions-item>
          <a-descriptions-item label="考试时间:">
            20200801
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTree,
} from "@/api/employee";
import {getExamTasksResult} from "@/api/examination"
import { paging } from "assets/js/mixin";
export default {
  mixins: [paging],
  data() {
    return {
      loginUserAuth: JSON.parse(localStorage.getItem("userInfo")).auth,
      //考试id
      examID:'',
      //三级联动
      sectionData: [],
      shopData: [],
      groupData: [],
      loading: false,
      //搜索字段
      section: "",
      shop: "",
      group: "",
      workerID: "",
      name: "",
      selectedRowKeys: [],
      columns: [
        {
          title: "工号",
          dataIndex: "workerID",
        },
        {
          title: "用户名",
          dataIndex: "name",
        },
        {
          title: "站段",
          dataIndex: "section",
        },
        {
          title: "班组",
          dataIndex: "group",
        },
        {
          title: "车间",
          dataIndex: "shop",
        },
        {
          title: "考试次数",
          dataIndex: "examTimes",
        },
        {
          title: "最高分",
          dataIndex: "highestScore",
        },
        {
          title: "是否通过",
          dataIndex: "pass",
          scopedSlots: { customRender: "pass" },
        },
        {
          title: "是否超时",
          dataIndex: "overDue",
          scopedSlots: { customRender: "overDue" },
        },
        {
          title: "最后考试时间",
          dataIndex: "completeTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [
        {
          id: 24,
          examID: 1,
          workerID: "4391",
          completed: false,
          completeTime: "2020-11-15T21:05:14+08:00",
          overDue: false,
          pass: false,
          examTimes: 0,
          highestScore: 0,
          name: "党若若",
          section: "天津机务段",
          shop: "验收室",
          group: "干部",
        },
      ],
      treeArr: {},
      formLayout: {
        spanCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      inputValue: "",
    };
  },
  mounted() {
    this.examID = this.$route.query.id;
    this.getTree();
    this.getExamResult();
  },
  methods: {
    result(recode){//获取考试结果
      const { href } = this.$router.resolve({
        path: `/paperResult`,
        query: {
          examID: recode.examID,
          workerID:recode.workerID
        }
      });
      window.open(href, "_blank");
    },
    print(){
      //获取要打印的Dom内容
      let newDomHtml = this.$refs.pdfDom.innerHTML;
      //将要打印的html赋给本页面
      window.document.body.innerHTML = newDomHtml;
      //调用windos的打印接口
      window.print();
      window.location.reload();   //解决打印之后按钮失效的问题，刷新页面
      return false;
    },
    back() {
      this.$router.go(-1);
    },
    handleSectionChange() {
      this.shop = "";
      this.group = "";
      var shopArr = [];
      var groupArr = [];
      for (const key in this.treeArr[this.section]) {
        shopArr.push(key);
      }
      for (const key2 in this.treeArr[this.section][shopArr[0]]) {
        groupArr.push(key2);
      }
      this.shopData = shopArr;
      this.groupData = groupArr;
    },
    handleShopChange() {
      this.group = "";
      var groupArr = [];
      for (const key2 in this.treeArr[this.section][this.shop]) {
        groupArr.push(key2);
      }
      this.groupData = groupArr;
    },
    //获取树结构
    getTree() {
      getTree()
        .then((res) => {
          this.treeArr = res.data.data;
          var sectionArr = [];
          var shopArr = [];
          var groupArr = [];
          for (const key in this.treeArr) {
            sectionArr.push(key);
          }
          for (const key in this.treeArr[sectionArr[0]]) {
            shopArr.push(key);
          }
          for (const key2 in this.treeArr[sectionArr[0]][shopArr[0]]) {
            groupArr.push(key2);
          }
          this.sectionData = sectionArr;
           //根据权限初始化数据
          if (this.loginUserAuth === 3) {
            this.section = JSON.parse(localStorage.getItem("userInfo")).section;
            this.shop = JSON.parse(localStorage.getItem("userInfo")).shop;
            this.handleShopChange();
          }
          //   this.shopData = shopArr;
          //   this.groupData = groupArr;
          // this.section = sectionArr[0];
          // this.shop = shopArr[0];
          // this.group = groupArr[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getExamResult();
    },
    //重置
    reset() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.group = "";
      this.jobCardID = "";
      this.workerID = "";
      this.name = "";
      if (this.loginUserAuth === 3) {
        this.section = JSON.parse(localStorage.getItem("userInfo")).section;
        this.shop = JSON.parse(localStorage.getItem("userInfo")).shop;
        this.handleShopChange();
      }else{
        this.section = "";
        this.shop = "";
      }
      this.getExamResult();
    },
    //分页操作
    employeeChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getExamResult();
    },
    getExamResult() {
      this.loading = true;
      var params = {
        page: this.pageNum,
        limit: this.pageSize,
        section: this.section,
        shop: this.shop,
        group: this.group,
        name: this.name,
        examID:this.examID,
        workerID:this.workerID
      };
      getExamTasksResult(params)
        .then((res) => {
          this.list = res.data.employeeExamTasks;
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.formDiv {
  .lable {
    margin-right: 10px;
  }
}

.upload {
  float: right;
}

.recovery {
  height: 100%;
}

.table-content {
  height: calc(100% - 138px);
  overflow: auto;
}
</style>
<style media="print">
@page {
  size: auto;
  margin: 10mm 10mm 0 10mm;
}
</style>